<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
  </head>
  <body>
    <select class="a">
      <option>请选择</option>
    </select>
    <span>省</span>
    <select class="shi">
      <option>请选择</option>
    </select>
    <span>市</span>

    <script>
      var a = document.querySelector(".a");
      var shi = document.querySelector(".shi");
      var shengList = ["湖北", "山西", "河北"];
      var shiList = [
        [
          "潜江",
          "仙桃",
          "天门",
          "武汉",
          "荆门",
          "荆州",
          "宜昌",
          "孝感",
          "咸宁",
          "黄冈",
        ],
        [
          "太原市",
          "临汾市",
          "朔州市",
          "大同市",
          "长治市",
          "吕梁市",
          "晋中市",
          "忻州市",
          "运城市",
          "阳泉市",
          "晋城市",
        ],
        [
          "石家庄市",
          "唐山市",
          "秦皇岛市",
          "邯郸市",
          "邢台市",
          "保定市",
          "张家口市",
          "承德市",
          "沧州市",
          "廊坊市",
          "衡水市",
        ],
      ];

      for (var i = 0; i < shengList.length; i++) {
        // var shengGroup=new Option(shengList[i]);
        a.options.add(new Option(shengList[i]));
      }
      a.addEventListener("change", function (e) {
        console.log(e.target.selectedIndex);
        var shengIndex = e.target.selectedIndex - 1;
        shi.options.length = 0;
        for (var i = 0; i < shiList[shengIndex].length; i++) {
          var shiGroup = new Option(shiList[shengIndex][i]);
          shi.options.add(shiGroup);
        }
      });
    </script>
  </body>
</html>
